<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" ></meta>
    <title>样本数据</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap-datetimepicker.min.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${frames}/css/paginate.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/base/base.css">
    <link rel="stylesheet" href="${frames}/css/record.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/picker.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/modalContent.css" type="text/css">
  	<%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
</head>
<body>
<div id="recordwrap">
    <div class="page-header">
        <!-- /.page-header -->
        <ul class="page_nav">
            <li class="first cur">医卫士云平台&nbsp;&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li class="cur">数据查询&nbsp;&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li>样本数据</li>
        </ul>
    </div>
    <h3 style='font: normal 14px/70px "微软雅黑";color: #566278;'>样本数据</h3>
    <div id="date">
        <div class="form-group">
            <label>查看记录:</label>
            <div id="PrevTime" class="input-group date form_date" style="width: 106px" data-date-format="yyyy-mm-dd">
                <input id="pTime" class="form-control" type="text" readonly style="text-indent:0">
                <span class="input-group-addon">
                    <span class="glyphicon-calendar">&gt;</span>
                </span>
            </div>
        </div>
        <div class="form-group">
            <label class="To">到</label>
            <div id="NextTime" class="input-group date form_date" style="width: 106px" data-date-format="yyyy-mm-dd">
                <input id="nTime" class="form-control" type="text" readonly style="text-indent:0">
                <span class="input-group-addon">
                    <span class="glyphicon-calendar">&gt;</span>
                </span>
            </div>
        </div>
    </div>
    <div class="tableRecord">
        <table id="recordList" class="display" cellspacing="10" width="100%">
            <thead>
            <tr>
                <th>项目</th>
                <th>值</th>
                <th>单位</th>
                <th>日期</th>
                <th>姓名</th>
                <th>身份证</th>
            </tr>
            </thead>
        </table>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">项目筛选</h4>
            </div>
            <div class="modal-body">
                <label class="selectLabel">方法：</label>
                <select id="branchOne">
                    <option selected="selected" value="-1">请选择</option>
                    <option value="1">A</option>
                    <option value="2">B</option>
                </select>
                <div class="classes">
                    <span class="checkboxCon">大类：</span>
                    <div id="Method"><b style="font-size:22px;">--&nbsp;&nbsp;请选择内容&nbsp;&nbsp;--</b></div>
                    <div class="MethodCheck"></div>
                </div>
                <div id="checkFinish">
                    <div class="wrapLeftbox">
                        <ul id="Left"></ul>
                        <div class="moveRight">
                            <span class="moveR"><button>>><br>右移</button></span>
                            <span class="moveAll"><button>>>>><br>全部右移</button></span>
                        </div>
                    </div>
                    <div class="wrapRightbox">
                        <ul id="Checked"></ul>
                        <span class="alerady">
                            已选择
                            <b>0</b>
                            个
                        </span>
                        <span class="clear">清空</span>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default shutModal" data-dismiss="modal">完成</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var table;
    function initTable() {
       table = $('#recordList').DataTable({
       	"bFilter": false,//去掉搜索框
           "bAutoWidth": true, //自适应宽度
           "sPaginationType" : "full_numbers",
           "ordering": false,//是否允许Datatables开启排序
           "bProcessing" : true,
           "bServerSide" : true,
           "sAjaxSource":"${URL_QULITITY_RECORD}",
           "sAjaxDataProp": "dataList",//查询后，返回的集合
           "fnServerData": function ( sSource, aoData, fnCallback ) {  //查询条件
               aoData.push(
                       { "name": "PrevTime", "value": $("#pTime").val() },
                       { "name": "NextTime", "value": $("#nTime").val() },
                       { "name": "itemCodes", "value": $("#codeResult").val() },
                       { "name": "MKMedicalinstrumentId", "value": "${machineId}" }
               );
               $.ajax( {
                 "dataType": 'json',
                 "url": sSource,
                 "type":'post',
                 "data": aoData,
                 "success": fnCallback
               } );

            },
           
           "aoColumns" : [{
              "mDataProp" : "testItemName"
             }, {
           	 "mDataProp" : "testValue"
             }, {
           	 "mDataProp" : "valueUnit"
             }, {
                 "mDataProp" : "testTime",
                 "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                     var time = "";
                     if(sData!=null){
                    	 time = sData.substring(0,10);
                     }
                     $(nTd).html(time);
                   }
           } , {
         	   "mDataProp" : "patientName"
           },{
               "mDataProp" : "patientIdCard"
           }],
           "oLanguage": {//插件的汉化
               "sLengthMenu": "每页显示 _MENU_ 条记录",
               "sZeroRecords": "抱歉， 没有找到",
               "sInfo": "当前显示 _START_ 到 _END_条 ,共 _TOTAL_ 条记录",
               "sInfoEmpty": "没有数据",
               "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
               "oPaginate": {
                   "sFirst": "首页",
                   "sPrevious": "上一页",
                   "sNext": "下一页",
                   "sLast": "末页"
               },
               "sZeroRecords": "没有检索到数据",
               "sProcessing": "<img src='' />",
               "sSearch": "搜索"
           },
           "lengthChange":false,
           "lengthMenu": [5]
       } );
     }
    $(document).ready(function(){
    	initDateTime("#NextTime");
    	initDateTime("#PrevTime");
    	initTable();
    	$('#recordList_info').parent().addClass('showPage');
    	$('#recordList_previous').parent().addClass('pageNow');
    });
    function initDateTime(id){
        var t = $(id).datetimepicker({
        	language:  'zh-CN',
	        weekStart:  0,
	        todayBtn: true,
	        autoclose:  1,
	        todayHighlight: 1,
	        startView: 2,
	        minView: 2,
	        forceParse: 0 ,
	        format: "yyyy-mm-dd"
        });
        t.on('changeDate', function(ev){
        	refreshTable();
        });
    }
</script>
<script src="${newframe}/js/filedset.js"></script>
</body>
</html>